/*
 *  Copyright (c) 2025 Cshoo Org. All Rights Reserved.
 *
 *  author:杨翼
 *  date: 2025年8月30日
 *  description:Surround Photo Wall组件客户端js,负责3d轮播图的交互
 */

(function () {
    document.addEventListener('DOMContentLoaded', () => {
        const r = 500;
        const imgs = document.querySelectorAll('.surround-photo-wall img');
        const imgCount = imgs.length;
        const pdDeg = 360 / imgCount;

        // 批量处理避免多次重绘
        requestAnimationFrame(() => {
            for (let i = 0; i < imgCount; i++) {
                let img = imgs[i];
                let deg = i * pdDeg;
                let rad = deg * Math.PI / 180;
                let x = Math.sin(rad) * r;
                let z = Math.cos(rad) * r;

                // 使用CSS变量提升性能
                img.style.setProperty('--x', `${x}px`);
                img.style.setProperty('--z', `${z}px`);
                img.style.setProperty('--deg', `${180 + deg}deg`);
            }

            // 统一设置transform属性
            imgs.forEach(img => {
                img.style.transform = `translate3d(var(--x), 0, var(--z)) rotateY(var(--deg))`;
                img.style.display = 'unset'
            });
        });
    });

    let isDraggon = false;

    document.addEventListener('mousedown', (e) => {
        isDraggon = true;
    });

    document.addEventListener('mouseup', (e) => {
        isDraggon = false;
    });

    // 鼠标移动时更新旋转
    document.addEventListener('mousemove', (e) => {
        if(!isDraggon) {
            return;
        }
        circumgyrate(e);
    });

    function circumgyrate(e) {
        const container = document.querySelector('.surround-photo-wall .container');
        let startX = 0;
        let startY = 0;
        let currentAngle = 0;
        const deltaX = (startX - e.clientX) * 0.5;
        const deltaY = (startY - e.clientY) * 0.5;
        // 应用旋转（反向计算解决方向问题）
        container.style.transform = `rotateY(${currentAngle - deltaX}deg) rotateX(${currentAngle - deltaY}deg)`;
    }

})();